<template>
    <div>
        <wl-content-top>
            <template slot="header">
                <Form :model="formItem" :label-width="80" inline>
                    <FormItem label="邮箱">
                        <Input v-model="formItem.email" placeholder="请输入邮箱"></Input>
                    </FormItem>
                    <FormItem label="公司名">
                        <Input v-model="formItem.company" placeholder="输入公司名称"></Input>
                    </FormItem>
                    <FormItem label="网站">
                        <Input v-model="formItem.site" placeholder="请输入网址"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="handleSubmit" :loading="searchLoading">确定</Button>
                    </FormItem>
                </Form>
            </template>
            <template slot="body">
                <div class="user-search-box">
                    <div class="user-search-box-left">
                        <Menu active-name="1" @on-select="showModelAction" width="auto">
                            <MenuItem :name="item.id" v-for="(item,index) in buttonList" :key="index">
                                {{item.title}}
                            </MenuItem>
                        </Menu>
                    </div>
                    <div class="user-search-box-right">
                        <Row style="margin-bottom: 10px" v-if="selectShow">
                            <Col span="4" style="padding-right:10px">
                                <Select v-model="selectSite" filterable>
                                    <Option v-for="(item,index) in siteList" :value="item.value" :key="index">{{item.name }}</Option>
                                </Select>
                            </Col>
                        </Row>
                        <Row type="flex">
                            <template v-for="(item,index) in zhiLingList">
                                <Col v-if="item.name.split('|').length < 3" :key="index" class="lyx-mb10" span="8">
                                    <Button :key="index" type="primary" :loading="loading" @click="openViewPage(item)">
                                        {{item.name}}
                                    </Button>
                                </Col>
                            </template>
                            <Divider v-show="threeList.length >0"/>
                            <div class="search-remark" v-show="threeList.length >0">
                                注：三个条件同时查询，表示搜索内容同时包含三个条件，搜索结果更精确，但可能比较少
                            </div>
                            <template v-for="(item,index) in threeList">
                                <Col :key="index" class="lyx-mb10" span="8">
                                    <Button :key="index" type="primary" :loading="loading" @click="openViewPage(item)">
                                        {{item.name}}
                                    </Button>
                                </Col>
                            </template>
                        </Row>
                    </div>
                </div>
            </template>
        </wl-content-top>
    </div>
</template>

<script>
import { templateAction, createRand, addSearchLog } from '@/api/google'
import siteData from '@/mock/data/site'
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      formItem: {
        company: '',
        site: '',
        email: ''
      },
      loading: false,
      searchLoading: false,
      selectShow: false,
      selectSite: '',
      siteItem: {},
      siteList: [],
      modelShow: false,
      buttonList: [],
      zhiLingList: [],
      threeList: [],
      menuItem: {},
      menuId: ''
    }
  },
  mounted () {
    this.getTemplateList()
    let params = this.$route.params
    if (params.company) {
      this.formItem.company = params.company
    }
    if (params.site) {
      this.formItem.site = params.site
    }
    if (params.email) {
      this.formItem.email = params.email
    }
    if (params.menusId) {
      let _this = this
      this.searchLoading = true
      setTimeout(function () {
        _this.showModelAction(parseInt(params.menusId))
        _this.searchLoading = false
      }, 1500)
    }
  },
  methods: {
    ...mapActions([
      'setOpenIfreamUrl'
    ]),
    showModelAction (id) {
      this.menuId = id
      let formData = this.formItem
      if ((formData.company === formData.site) && formData.site !== '') {
        this.$Message.error('不能有重复内容')
        return false
      }
      if ((formData.company === formData.email) && formData.email !== '') {
        this.$Message.error('不能有重复内容')
        return false
      }
      if ((formData.site === formData.email) && formData.email !== '') {
        this.$Message.error('不能有重复内容')
        return false
      }

      if (formData.company === '' && formData.site === '' && formData.email === '') {
        this.$Message.error('请至少输入其中一项内容')
        return false
      } else {
        this.loading = true
        this.menuItem = this.$common.xeUtils.find(this.buttonList, item => item.id === id)
        createRand({ form: this.formItem, id: id }).then(ret => {
          this.loading = false
          let data = ret.data
          if (data.errcode === 1001) {
            this.zhiLingList = data.data
            let threeData = []
            this.zhiLingList.forEach(item => {
              if ((item.name.split('|')).length > 2) {
                threeData.push(item)
              }
            })
            this.threeList = threeData
            if (this.zhiLingList[0].is_site) {
              this.selectShow = true
              this.siteList = siteData[this.zhiLingList[0].is_site]
            } else {
              this.selectShow = false
            }
          } else {
            this.$Message.warning(data.errmsg)
          }
        }).catch(e => {
          this.$Message.error('连接网络失败，请重试')
        })
        this.modelShow = false
      }
    },
    getTemplateList () {
      templateAction({ pageSize: 100 }, 'get').then(ret => {
        let data = ret.data
        if (data.errcode === 1001) {
          this.buttonList = data.data.results
        } else {
          this.$Message.error('获取模版失败')
        }
      })
    },
    goHref (data) {
      let url = ''
      if (data.is_site) {
        console.log(data.url, 'url11')
        url = data.url.replace(/###/g, this.selectSite)
        console.log(url, 'url')
      } else {
        url = data.url
      }
      // this.setOpenIfreamUrl(data.url)
      this.addLog(data, url)
      window.open(url)
    },
    openViewPage (data) {
      // const { href } = this.$router.resolve({
      //  name: 'viewPage'
      // })
      this.goHref(data)
      // window.open(href, '_blank')
    },
    addLog (item, url) {
      let data = this.formItem
      data.title = this.menuItem.title
      if (this.selectShow) {
        let siteItem = this.$common.xeUtils.find(this.siteList, item => item.value === this.selectSite)
        data.title = data.title + '/' + siteItem.name
      }
      data.description = item.name
      data.url = url
      data.other = this.menuId
      addSearchLog(data).then(ret => {

      })
    },
    handleSubmit () {
      this.showModelAction(this.menuId)
    }
  }
}
</script>

<style scoped lang="less">
    .lyx-mb10 {
        margin-bottom: 10px;
    }

    .user-search-box {
        display: flex;

        &-left {
            width: 300px;
            background-color: #d7dde4;
            overflow: scroll;
        }

        &-right {
            padding: 20px;
            width: 100%;
            overflow: hidden;
        }
    }

    .search-remark {
        width: 100%;
        margin-bottom: 10px;
    }
</style>
